// //面向过程
// ;(function(){
//     //1 设置定时器，每隔一秒切换图片
//     //1.1 定时器外定义全局变量num
//     let num = 1 
//     let t = null
//     function startLbt(){
//         t = setInterval(function(){
//             //1.2 定时器内num++ 当num超出图片个数，重置num=1
//             num++
//             if(num>6) num = 1
//             //1.3 修改图片的地址
//             document.querySelector('.box1 img').src = `./imgs/img${num}.jpg`
//             //1.4 同步小圆球
//             //1.4.1 清除小圆球之前的class
//             document.querySelector('.box1 ul li.active').className = ''
//             //1.4.2 给当前图片对应的小圆球添加class
//             let liObjs = document.querySelectorAll('.box1 ul li')
//             liObjs[num-1].className = 'active'
//         },1000)    
//     }
//     startLbt() //将定时器封装起来，首先调用一次

//     //2 鼠标移入事件
//     //2.1 获取当前box中所有小圆球，并遍历
//     let xyqObjs = document.querySelectorAll('.box1 ul li')
//     xyqObjs.forEach(function(item,i){
//         //2.3挨个给每个小圆球绑定鼠标移入事件
//         item.onmouseover = function(){
//             //2.3.1 清除定时器
//             clearInterval(t)
//             //2.3.2 同步图片、索引、小圆球
//             document.querySelector('.box1 img').src = `./imgs/img${i+1}.jpg`
//             num = i+1
//             document.querySelector('.box1 ul li.active').className = ''
//             xyqObjs[i].className = 'active'
//         }
//         //2.4挨个给每个小圆球绑定鼠标移入事件
//         item.onmouseout = function(){
//             //2.4.1 开启定时器
//             startLbt()
//         }
//     })
// })()



// ;(function(){
//     //1 设置定时器，每隔一秒切换图片
//     //1.1 定时器外定义全局变量num
//     let num = 1 
//     let t = null
//     function startLbt(){
//         t = setInterval(function(){
//             //1.2 定时器内num++ 当num超出图片个数，重置num=1
//             num++
//             if(num>6) num = 1
//             //1.3 修改图片的地址
//             document.querySelector('.box2 img').src = `./imgs/img${num}.jpg`
//             //1.4 同步小圆球
//             //1.4.1 清除小圆球之前的class
//             document.querySelector('.box2 ul li.active').className = ''
//             //1.4.2 给当前图片对应的小圆球添加class
//             let liObjs = document.querySelectorAll('.box2 ul li')
//             liObjs[num-1].className = 'active'
//         },1000)    
//     }
//     startLbt() //将定时器封装起来，首先调用一次

//     //2 鼠标移入事件
//     //2.1 获取当前box中所有小圆球，并遍历
//     let xyqObjs = document.querySelectorAll('.box2 ul li')
//     xyqObjs.forEach(function(item,i){
//         //2.3挨个给每个小圆球绑定鼠标移入事件
//         item.onmouseover = function(){
//             //2.3.1 清除定时器
//             clearInterval(t)
//             //2.3.2 同步图片、索引、小圆球
//             document.querySelector('.box2 img').src = `./imgs/img${i+1}.jpg`
//             num = i+1
//             document.querySelector('.box2 ul li.active').className = ''
//             xyqObjs[i].className = 'active'
//         }
//         //2.4挨个给每个小圆球绑定鼠标移入事件
//         item.onmouseout = function(){
//             //2.4.1 开启定时器
//             startLbt()
//         }
//     })
// })()



//面向对象
function Lbt(el){ //构造函数   this -> box1/box2
    //将当前box保存在el里 
    this.el = document.querySelector(el)

    this.num = 1 //设置全局变量num
    this.t = null //设置定时器的唯一标识

    //启动插件
    this.init()
}
Lbt.prototype.init = function(){
   
    //定时器事件
    this.setInter()
    
    //鼠标移入事件
    this.mouseOver()

    //鼠标移出事件
    //this.mouseOut()
}

//定时器事件
Lbt.prototype.setInter = function(){ //构造函数：this -> 实例化对象 就是box1和box2
    //设置定时器
    this.t = setInterval(() => { //给定时器设置唯一标识  箭头函数：this->父function中的this
        this.num++
        //num超出图片个数时 重置num为1
        if(this.num>6)  this.num = 1
        //修改图片地址
        this.el.querySelector('img').src = `./imgs/img${this.num}.jpg`
        //同步分页器
        //清除小圆球之前的class
        this.el.querySelector('li.active').className = ''
        //给岗前图片对应的小圆球加class
        this.el.querySelectorAll('ul li')[this.num-1].className = 'active'
    },1000)
}

//鼠标移入事件
Lbt.prototype.mouseOver = function(){
    //获取所有小圆球
    let liObjs = this.el.querySelectorAll('ul li')
    //遍历所有小圆球
    liObjs.forEach((item,i) => { 
        //给每个小圆球绑定鼠标移入事件
        item.onmouseover = ()=>{  //事件函数 this->事件源 就是item
            //清除定时器
            clearInterval(this.t)
            //同步图片
            this.el.querySelector('img').src = `./imgs/img${i+1}.jpg`
            //同步索引
            this.num = i+1
            //同步分页器
            //清除小圆球之前的class
            this.el.querySelector('li.active').className = ''
            //给岗前图片对应的小圆球加class
            this.el.querySelectorAll('ul li')[this.num-1].className = 'active'
        }
        //给每个小圆球绑定鼠标移出事件
        item.onmouseout = ()=>{
            this.mouseOut()
        }
    })
}
//鼠标移出事件
Lbt.prototype.mouseOut = function(){
    //开启定时器
    this.setInter()
}









